<template>
  <div>
    <new-header v-bind:header="header"></new-header>
    <a class="user" v-on:click="toInfo()">
      <img src="../assets/img/my@3x.png"/>
    </a>
     <a class="qrcode" v-on:click="entering()">
      <img src="../assets/img/qr-code@3x.png"/>
    </a>
     <div class="qrcode-box">
            <div id="output"></div>
            <img src='' id='my_qrcode' />
    </div>

  </div>
</template>

<script>
import newHeader from "../components/new-header";
import $ from "../assets/js/jquery.min.js";

import { mapState, mapActions } from "vuex";
import { USER_SIGNIN } from "../store/user";

import "../assets/js/jquery.qrcode-logo.min.js";
import "../assets/js/InitWX_custom.js";
export default {
  name: "qrcode",
  data() {
    return {
      picked: "2",
      header: {
        cnTitle: "扫码获得免费在线课程",
        cnStyle: {
          fontSize: "20px",
          marginTop: "15px"
        }
      },
      staff: {
        name: "",
        gender: 1,
        mobile: "",
        email: "",
        date: "",
        ageValue: "",
        age: ""
      },
      isConfirm: false
    };
  },
  created: function() {
    // var _that = this;
    // if (_that.user.token == undefined) {
    //   _that.$router.push('/login');
    // }


  },
  mounted() {
    var token = this.user.token;
    var mediaSn = this.user.locationid;
    http://stagesites.vipabc.com/vbd/ops/#/login
    var shareLink = window.location.origin + "/vbd/ops/#/form?token="+token+"&mediaSn"+mediaSn;
    //stagesites.vipabc.com/vbd/ops/#/login
    http: $("#output").html("");
    $("#output").qrcode({
      render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
      text: shareLink, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
      width: 200, //二维码的宽度
      height: 200,
      background: "#ffffff", //二维码的后景色
      foreground: "#000000" //二维码的前景色
      // src: 'http://source.vipabc.com/ext/images/website/abc/linkage_page/mgm2017_event10_16/logo.png',
    });
    var imgSrc = $("canvas")[0].toDataURL("image/png");
    document.getElementById("my_qrcode").src = imgSrc;
  },
  methods: {
    ...mapActions([USER_SIGNIN]),
    toInfo: function() {
      this.$router.push("/info");
    },
    entering: function() {
      this.$router.push("/entering");
    }

  },
  computed: {
    ...mapState(["user"])
  },
  components: { newHeader }
};
</script>
<style>
.qrcode {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0px;
  width: 15%;
}
.qrcode img {
  width: 100%;
}
.qrcode-box {
  width: 230px;
  height: 230px;
  box-sizing: border-box;
  padding: 15px;
  margin: 50px auto;
  position: relative;
  background: #fff;
}
#output {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
